<template>
  <div>
    <ComTable
      :config="config"
      :pagination="{
        total: pageing.total,
        pageNum: pageing.pageNum,
        pageSize: pageing.pageSize,
      }"
      :list="getinvoicelisttable"
      :modes="consumptionModes"
    >
      <el-table-column align="left" width="100" label="发票状态">
        <template slot-scope="scope">
          <span
            @click="
              drawer = true;
              RowClickFn(scope.row);
            "
            style="color: #1890ff"
            >{{ selecstatus(scope.row.status) }}</span
          >
        </template>
      </el-table-column>
    </ComTable>
 
    <Comdrawer
      size="60%"
      title="发票详情" 
      @eventColse="handleClose"
      :drawer="drawer"
      v-if="oderlist.status==2?true:false"
    >
      <div class="businEdit">
        <el-row>
         <el-col>
            <el-descriptions title="发票信息" :column="1">
              <el-descriptions-item label="发票类型">{{selectype(oderlist.type)}}</el-descriptions-item>
              <el-descriptions-item label="抬头类型">{{oderlist.titleType}}</el-descriptions-item>
              <el-descriptions-item label="发票抬头">{{oderlist.title}}</el-descriptions-item>
              <el-descriptions-item label="企业税号">{{oderlist.sh}}</el-descriptions-item>
              <el-descriptions-item label="注册地址">{{oderlist.zcdz}}</el-descriptions-item>
              <el-descriptions-item label="开户银行">{{oderlist.khyh}}</el-descriptions-item>
              <el-descriptions-item label="银行账号">{{oderlist.yhzh}}</el-descriptions-item>
              <el-descriptions-item label="发票金额">{{oderlist.amount}}</el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col style="margin:10px 0">
            <el-descriptions title="收件信息" :column="1">
              <el-descriptions-item label="邮箱">{{oderlist.email}}</el-descriptions-item>
              <el-descriptions-item label="收件人">{{oderlist.sjr}}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{oderlist.tel}}</el-descriptions-item>
              <el-descriptions-item label="地址">{{oderlist.address}}</el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col>
           <el-descriptions  title="所含订单" :column="1" >
              <el-descriptions-item label="订单" v-for="(ele, index) in oderlist.orderList " :key="ele.id">
                {{ele.remark}}
                </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col>
            <div class="fpbtn" >
            <el-button type="primary" size="small" >打印发票</el-button>
            <el-button class="yjfp"  size="small" @click="vshow=true">邮寄发票</el-button>
            </div>
          <div v-show="vshow" class="formbtn">
          <el-form :inline="true" :model="formInline" :rules="rules" ref="ruleForm" label-width="100px"  class="demo-form-inline">
          <el-form-item  prop="kddh">
            <el-input v-model="formInline.kddh" placeholder="请输入快递单号"></el-input>
          </el-form-item>
           <el-form-item  prop="kdgs">
            <el-input v-model="formInline.kdgs" placeholder="请输入快递公司"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" size="mini">确定</el-button>
             <el-button @click="resetForm('ruleForm')" size="mini">取消</el-button>
          </el-form-item>
        </el-form>
            </div>
          </el-col>

        </el-row>
      </div>
    </Comdrawer>
       <Comdrawer
      size="60%"
      title="发票详情" 
      @eventColse="handleClose"
      :drawer="drawer"
      v-else-if="oderlist.status==1?true:false"
    >
      <div class="businEdit">
        <el-row>
          <el-col>
            <el-descriptions title="发票信息" :column="1">
              <el-descriptions-item label="发票类型">{{selectype(oderlist.type)}}</el-descriptions-item>
              <el-descriptions-item label="抬头类型">{{oderlist.titleType}}</el-descriptions-item>
              <el-descriptions-item label="发票抬头">{{oderlist.title}}</el-descriptions-item>
              <el-descriptions-item label="企业税号">{{oderlist.sh}}</el-descriptions-item>
              <el-descriptions-item label="注册地址">{{oderlist.zcdz}}</el-descriptions-item>
              <el-descriptions-item label="开户银行">{{oderlist.khyh}}</el-descriptions-item>
              <el-descriptions-item label="银行账号">{{oderlist.yhzh}}</el-descriptions-item>
              <el-descriptions-item label="发票金额">{{oderlist.amount}}</el-descriptions-item>
            </el-descriptions>
          </el-col>
                
          <el-col style="margin:10px 0">
            <el-descriptions title="收件信息" :column="1">
              <el-descriptions-item label="邮箱">{{oderlist.email}}</el-descriptions-item>
              <el-descriptions-item label="收件人">{{oderlist.sjr}}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{oderlist.tel}}</el-descriptions-item>
              <el-descriptions-item label="地址">{{oderlist.address}}</el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col>
            <el-descriptions  title="所含订单" :column="1" >
              <el-descriptions-item label="订单" v-for="(ele, index) in oderlist.orderList " :key="ele.id">
                {{ele.remark}}
                </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>
    </Comdrawer>
     <Comdrawer
      size="60%"
      title="发票详情" 
      @eventColse="handleClose"
      :drawer="drawer"
      v-else
    >
      <div class="businEdit">
        <el-row>
          <el-col>
            <el-descriptions title="发票信息" :column="1">
              <el-descriptions-item label="发票类型">{{selectype(oderlist.type)}}</el-descriptions-item>
              <el-descriptions-item label="抬头类型">{{oderlist.titleType}}</el-descriptions-item>
              <el-descriptions-item label="发票抬头">{{oderlist.title}}</el-descriptions-item>
              <el-descriptions-item label="企业税号">{{oderlist.sh}}</el-descriptions-item>
              <el-descriptions-item label="注册地址">{{oderlist.zcdz}}</el-descriptions-item>
              <el-descriptions-item label="开户银行">{{oderlist.khyh}}</el-descriptions-item>
              <el-descriptions-item label="银行账号">{{oderlist.yhzh}}</el-descriptions-item>
              <el-descriptions-item label="发票金额">{{oderlist.amount}}</el-descriptions-item>
            </el-descriptions>
          </el-col>
                
          <el-col style="margin:10px 0">
            <el-descriptions title="收件信息" :column="1">
              <el-descriptions-item label="邮箱">{{oderlist.email}}</el-descriptions-item>
              <el-descriptions-item label="收件人">{{oderlist.sjr}}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{oderlist.tel}}</el-descriptions-item>
              <el-descriptions-item label="地址">{{oderlist.address}}</el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col>
            <el-descriptions title="物流信息" :column="1">
              <el-descriptions-item label="承运快递" >{{oderlist.kdgs}}</el-descriptions-item>
              <el-descriptions-item label="物流编号" >{{oderlist.kddh}}</el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col>
           <el-descriptions  title="所含订单" :column="1" >
              <el-descriptions-item label="订单" v-for="(ele, index) in oderlist.orderList " :key="ele.id">
                {{ele.remark}}
                </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>
    </Comdrawer>
  </div>
</template>

<script>
import ComTable from "../../../components/comTable.vue";
import Comdrawer from "../../../components/Comdrawer.vue";
import { getinvoiceidlist,editinvoiceidlist } from "../../../newApi_3-24/askAround/index";

export default {
  name: "Information",
  props: ["getinvoicelisttable"],
  components: { ComTable, Comdrawer },
  data() {
    return {
      // 表格配置
      config: {
        // border: true,
        isAdd: false,
        loading: false,
      },
      //邮寄显示隐藏
      vshow:false,
      userid:'',
       formInline: {
          kddh: '',
          kdgs: ''
        },
      consumptionModes: [
        {
          width: 160,
          label: "发票代码",
          mode: "no",
        },

        {
          width: 120,
          label: "发票类型",
          mode: "type",
          showOverflowTooltip: true,
          options: [
            {
              l: "普通发票 ",
              v: 1,
            },
            {
              l: "增值税专用发票 ",
              v: 2,
            },
          ],
        },
        {
          width: 120,
          label: "开票金额（元）",
          mode: "amount",
          showOverflowTooltip: true,
        },
        {
          width: 100,
          label: "申请时间",
          mode: "createdTime",
          showOverflowTooltip: true,
        },
        {
          width: 160,
          label: "开票时间",
          mode: "updatedTime",
          showOverflowTooltip: true,
        },

        {
          width: 160,
          label: "邮寄时间",
          mode: "kdTime",
        },
      ],
      rules: {
          kddh: [
            { required: true, message: '请输入快递单号', trigger: 'blur' },
          ],
           kdgs: [
            { required: true, message: '请输入快递公司', trigger: 'blur' },
          ],
      },
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
      //编辑抽屉是否弹出
      drawer: false,
      //发票详情数据
      oderlist: [],
    };
  },
  created() {},
  methods: {
    //状态的判断
    selecstatus(value) {
      const stateMap = {
        '1': "未开票",
        '2': "已开票",
        '3': "已邮寄",
      };
      return stateMap[value];
    },
     selectype(value) {
      const typeMap = {
        '1': "普通发票",
        '2': "增值税专用发票",
      };
      return typeMap[value];
    },
    //查询对应ID订单信息
    async getinvoiceidlistfn(id) {
      let newdata = {
        id: id,
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize,
        total: this.pageing.total,
      };
      let { code, data } = await getinvoiceidlist(newdata);
      if (code != 200) return;
      this.oderlist = data;
    },
    //邮递快递订单信息
    async editinvoiceidlistfn() {
     this.oderlist.kddh=this.formInline.kddh
     this.oderlist.kdgs=this.formInline.kdgs
     this.oderlist.status="3"
      let { code,msg } = await editinvoiceidlist(this.oderlist);
      if (code == 200) {
         this.$message({
          showClose: true,
          message:msg ,
          type: 'success'
        });
        this.drawer = false;
        this.getinvoiceidlistfn(this.userid);
      };
    },
    RowClickFn(row) {
      this.getinvoiceidlistfn(row.id);
      this.userid=row.id
    },
    //关闭抽屉
    handleClose() {
      this.drawer = false;
      // this.$nextTick(() => {
      //       this.$refs["form"].clearValidate();
      //     });
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.editinvoiceidlistfn();
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  },
};
</script>

<style  scoped>
.businEdit {
  margin: 20px 40px;
}
>>> .el-descriptions-row {
  margin: 10px;
}
>>> .el-descriptions-item__label {
  margin-right: 30px;
  /* color: #ccc; */
}
.el-descriptions {
  font-size: 14px;
}
.fpbtn{
  margin: 20px 80px;
}
.fpbtn button{
  width: 120px;
  margin: 10px;
  /* background-color: #E0770A; */
  /* color: white; */
  border: 0;
  height: 40px;
  /* line-height: 30px; */
}
.fpbtn .yjfp{
   background-color: #E0770A; 
  color: white;
}
.formbtn{
  margin-left: 40px;
}
</style>>

